<template>
	<view class="pagess">
		<uNavbar title="全民拼车" bgColor="#10191F" leftIconColor="#ffffff" :titleStyle="titleStyle" rightText="玩法介绍"
			@rightClick="isIntroduce"></uNavbar>
		<view class=" navigation flex_dq">
			<view class="navigation_box flex_c" :class="item.id == ids ? 'active':''" v-for="(item,index) in navList"
				:key="item.id" @click="changeNav(item.id)">
				<view class="activeimg"></view>
				<text>{{item.name}}</text>
			</view>
		</view>
		<view class="noticeBar">
			<u-notice-bar v-if="noticeInfo" :text="noticeInfo" icon="" speed="40" bgColor="#10191F" fontSize="14"
				color="#ffffff"></u-notice-bar>
		</view>

		<view v-if="ids ==1">
			<view class="exhibition">
				<view class="xuancai"></view>
				<view class="car_box_tit flex_Z">
					<view class="car_box_tit_l flex_dq">
						<image src="../../static/icon/i_car1.png" mode="aspectFill"></image>
						<text>厂商指导价</text>
					</view>
					<view class="car_number">
						<text>{{carInfoPool.market_price}}</text>
						<image class="car_bg2" src="../../static/image/car1.png" mode=""></image>
					</view>
					<image class="carlogo" :src="carInfoPool.car_logo" mode=""></image>
				</view>
				<image class="bg1" src="../../static/image/car_bg.png" mode="aspectFill"></image>
				<image class="bg2" data-url="/pagesMy/nationalCarPooling/carDetail" @click="allJump"
					:src="carInfoPool.carpool_cover" mode="aspectFill"></image>
				<text class="jindu">当前拼车进度{{carInfoPool.current_accumulated_ratio}}%</text>
				<view class="allocation" v-if="is_allocation" @click="goPeihao">
					<image src="../../static/image/peihao.png" mode="aspectFill"></image>
				</view>
				<view class="allocation" v-if="winningStatus" @click="gomycar">
					<image src="../../static/image/newtime.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="cumulative flex_dq">
				<view class="cumulative_l flex_dq"></view>
				<view class="cumulative_r flex_Z">
					<view class="cumulative_tit flex_ld">
						<text class="cumu_lj">买车基金当期累计</text>
						<text class="cumulative_money">￥{{carInfoPool.accumulated_price}}</text>
					</view>
					<view class="progress flex_ld">
						<u-line-progress :percentage="carInfoPool.accumulated_ratio" height="12"
							inactiveColor="transparent"></u-line-progress>
					</view>
				</view>
			</view>
			<view class="card flex_ld">
				<view class="card_l" data-url="/pagesMy/nationalCarPooling/carAccount" @click="allJump">
					<view class="card_box flex_Z">
						<view class="card_tit flex_ld">
							<text class="f32 c0">我的账户</text>
							<u-icon name="arrow-right" color="#ffffff" size="18"></u-icon>
						</view>
						<text class="f28 c9">交易额度记录</text>
					</view>
				</view>
				<view class="card_r" data-url="/pagesMy/nationalCarPooling/myCarPooling" @click="allJump">
					<view class="card_box flex_Z">
						<view class="card_tit flex_ld">
							<text class="f32 c0">我的拼车</text>
							<u-icon name="arrow-right" color="#ffffff" size="18"></u-icon>
						</view>
						<text class="f28 c9">查看已有配件</text>
					</view>
				</view>
			</view>
			<!-- 开盲盒 -->
			<view class="blind_box flex_ZC">
				<view class="voice flex_dq" @click="changeVoice">
					<image src="../../static/icon/no_voice.png" v-show="!voiceShow" mode="aspectFill"></image>
					<image src="../../static/icon/voice.png" v-show="voiceShow" mode="aspectFill"></image>
				</view>
				<view class="donghua flex_dq" @click="changeAnimation">
					<image src="../../static/icon/no_animation.png" v-show="!animationShow" mode="aspectFill"></image>
					<image src="../../static/icon/animation.png" v-show="animationShow" mode="aspectFill"></image>
				</view>
				<view class="blind_txt1 flex_dq">
					<text>开盲盒得配件</text>
					<image @click="tipShow = true" src="../../static/image/wenhao.png" mode="aspectFill"></image>
				</view>
				<view class=" flex_dq">
					<text class="blind_txt2">重置倒计时</text>
					<u-count-down :time="countDown" format="HH:mm:ss"></u-count-down>
				</view>
				<text class="blind_txt3" @click="goBoxRecord">开盒记录</text>
				<view class="blind_img" v-if="!blindShow">
					<image src="../../static/image/blind1.gif" mode="aspectFill"></image>
				</view>
				<view class="surplus flex_c">
					<text v-if="carInfo.box_status == 1 && carInfo.box_times!=-1">免费</text>
					<text v-else-if="carInfo.box_status == 2">付费</text>
					<text v-else-if="carInfo.box_status == 3">今日</text>
					<text v-if="carInfo.box_times!=-1">剩余次数 {{carInfo.box_times}}</text>
				</view>
				<view class="blind_btn flex_c" v-if="carInfo.box_status == 1" @click="showPay = true">
					<text>免费</text>
				</view>
				<view class="blind_btn  flex_c" v-else-if="carInfo.box_status == 2" @click="showPay = true">
					<text>开启</text>
					<view class="open flex_dq" v-if="payType == 1" >
						<image src="../../static/icon/fhtb.png" mode="aspectFill"></image>
						<text>{{carInfo.box_cost}}</text>
					</view>
					<view class="open flex_dq" v-if="payType == 2" >
						<image src="../../static/icon/fhtb.png" mode="aspectFill"></image>
						<text>{{carInfo.box_ful_cost}}</text>
					</view>
				</view>
				<view class="limit  flex_c" v-else-if="carInfo.box_status == 3">
					<text>暂无可用次数</text>
				</view>

			</view>
			<view class="empty"></view>
			<!-- <audio src="/static/voice/voice.wav"></audio> -->
		</view>

		<view v-if="ids == 2">
			<view class="grade flex_Z" :class="index + 1  == myLevel?'texiao':''" v-for="(item,index) in vipList"
				:key="index">
				<view class="grade_top ">
					<view class="grade_box flex_dq">
						<image v-if="index+1 ==1" src="../../static/icon/i_grade1.png" mode="aspectFill"></image>
						<image v-if="index+1 ==2" src="../../static/icon/i_grade2.png" mode="aspectFill"></image>
						<image v-if="index+1 ==3" src="../../static/icon/i_grade3.png" mode="aspectFill"></image>   
						<text v-if="index+1 ==2" class="colorful2">{{index+1}}级</text>
						<text v-if="index+1 ==3" class="colorful3">{{index+1}}级</text>
					</view>
					<view class="grade_box flex_dq " style="margin-left: 210rpx;" v-if="index + 1  == myLevel">
						<image src="../../static/image/mbox.png" mode="aspectFill"></image>
						<text v-if="index+1 ==1" class="colorful1">生效中</text>
						<text v-if="index+1 ==2" class="colorful2">生效中</text>
						<text v-if="index+1 ==3" class="colorful3">生效中</text>
					</view>
					<view class="grade_box flex_dq" v-else>
						<!-- <image src="../../static/image/mbox.png" mode="aspectFill"></image> -->
						<!-- <text v-if="index+1 ==1" class="colorful1">{{item.title}}盲盒</text> -->
						<!-- <text v-if="index+1 ==2" class="colorful2">{{item.title}}盲盒</text> -->
						<!-- <text v-if="index+1 ==3" class="colorful3">{{item.title}}盲盒</text> -->
					</view>
					<image class="bor_btm" src="../../static/image/car_bg2.png" mode="aspectFill"></image>
				</view>
				<view class="grade_c_tip">
					<rich-text class="explain" :nodes="item.information"></rich-text>
				</view>
				<view class="activation">
					<!-- <text>激活条件：多彩王朝实名用户</text> -->
				</view>
				<image v-if="index+1 == myLevel" class="grade_bg1" src="../../static/image/car_bg1.png"
					mode="aspectFill"></image>
			</view>
		</view>

		<view v-if="ids == 3">
			<view class="ranking_box">
				<view class="navbars flex_dq">
					<view class="navbars_box flex_dq" v-for="(item,index) in tabList" :key="index"
						@click="changePhb(item.id)">
						<text :class="item.id == navId ?'active2':''">{{item.name}}</text>
					</view>
					<image class="bor_btm" src="../../static/image/car_bg2.png" mode="aspectFill"></image>
				</view>
				<view v-if="navId == 1">
					<view class="second flex_dq">
						<!-- <text class="second_txt1 lllll ">排行</text> -->
						<text class="second_txt2 lllll ">用户</text>
						<text class="second_txt3 rrrrr">当前完成度</text>
					</view>
					<view class="ranking_list flex_dq"  v-for="(item,index) in rankingList" :key="index">
<!-- 						<view class="second_txt1 lllll">
							<text class="geren">{{item.number}}</text>
							<image class="top1" v-if="item.number == 1" src="../../static/image/top1.png"
								mode="aspectFill">
							</image>
							<image class="top1" v-if="item.number == 2" src="../../static/image/top2.png"
								mode="aspectFill">
							</image>
							<image class="top1" v-if="item.number == 3" src="../../static/image/top3.png"
								mode="aspectFill">
							</image>
						</view> -->
						<view class="second_txt2 lllll">
							<image :src="item.head_img" mode="aspectFill"></image>
							<view class="centertop flex_Z">
								<text class="name">{{item.nickname}}</text>
								<text
									class="time">已用{{item.used_time.day}}天{{item.used_time.hour}}时{{item.used_time.minute}}分</text></text>
							</view>
						</view>
						<view class="second_txt3 rrrrr">
							<text class="baifen">{{item.completion_degree}}%</text>
						</view>
					</view>
				</view>

				<view v-if="navId == 2">
					<view class="second flex_dq">
						<text class="second_txt1 lllll ">排行</text>
						<text class="second_txt2 flex_c">用户</text>
						<text class="second_txt3 rrrrr">完拼卡编号</text>
					</view>
					<view class="ranking_list flex_dq" v-for="(item,index) in monthlist" :key="index">
						<view class="second_txt1 lllll">
							<text class="geren">{{item.number}}</text>
							<image class="top1" v-if="item.number == 1" src="../../static/image/top1.png"
								mode="aspectFill">
							</image>
							<image class="top1" v-if="item.number == 2" src="../../static/image/top2.png"
								mode="aspectFill">
							</image>
							<image class="top1" v-if="item.number == 3" src="../../static/image/top3.png"
								mode="aspectFill">
							</image>
						</view>
						<view class="second_txt2 lllll">
							<image :src="item.head_img" mode="aspectFill"></image>
							<view class="centertop flex_Z">
								<text class="name">{{item.nickname}}</text>
								<text class="time">{{item.completed_time}}</text>
							</view>
						</view>
						<view class="second_txt3 rrrrr">
							{{item.goods_number}}
							<!-- <text class="baifen" v-if="item.status == 0">拼车中</text>
							<text class="baifen" v-if="item.status == 1">待配号</text>
							<text class="baifen" v-if="item.status == 2">待抽签</text>
							<text class="baifen" v-if="item.status == 3">待交车</text>
							<text class="baifen" v-if="item.status == 6">已交车</text> -->
						</view>
					</view>
				</view>

				<view class="myphb" v-if="rankingList.length>0 && navId == 1">
					<view class="myphb_box ">
						<view class="ranking_list qqqq flex_dq">
							<!-- <view class="second_txt1 lllll ">
								<text class="geren" v-if="selfInfo.number">{{selfInfo.number}}</text>
								<text class="geren2" v-else>未上榜</text>
								<image class="top1" v-if="selfInfo.number == 1" src="../../static/image/top1.png"
									mode="aspectFill">
								</image>
								<image class="top1" v-if="selfInfo.number == 2" src="../../static/image/top2.png"
									mode="aspectFill">
								</image>
								<image class="top1" v-if="selfInfo.number == 3" src="../../static/image/top3.png"
									mode="aspectFill">
								</image>
							</view> -->
							<view class="second_txt2 lllll">
								<image :src="selfInfo.head_img" mode="aspectFill"></image>
								<view class="centertop flex_Z">
									<text class="name">{{selfInfo.nickname}}</text>
									<text
										class="time">已用{{selfInfo.used_time.day}}天{{selfInfo.used_time.hour}}时{{selfInfo.used_time.minute}}分</text></text>
								</view>
							</view>
							<view class="second_txt3 rrrrr">
								<text class="baifen">{{selfInfo.completion_degree}}%</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="empty3"></view>
		</view>

		<!-- 支付弹窗 -->
		<u-popup :show="showPay" @close="showPay = false" closeable bgColor="transparent">
			<view class="pay flex_ZC">
				<text class="c0">购买信息</text>
				<view class="pay_box flex_Z">
					<view class="pay_box_c flex_ld">
						<text class="c0 ">支付项目</text>
						<text class="c0">拼车盲盒</text>
					</view>
					<view class="pay_box_c flex_ld">
						<text class="c0">购买数量</text>
						<text class="c0 f28">x 1</text>
					</view>
					<view class="pay_money  flex_ld">
						<text class="f28 c0">应支付金额</text>
						<view class=" flex_dq">
							<image class="pay_img" src="../../static/icon/fhtb.png" mode="aspectFill"></image>
							<text class=" go_pay" v-if="carInfo.box_status == 1">0</text>
							<view class=""  v-else>
								<text class=" go_pay" v-if="payType == 1">{{carInfo.box_cost}}</text>
								<text class=" go_pay" v-if="payType == 2">{{carInfo.box_ful_cost}}</text>
							</view>
						</view>
					</view>
					<view class="interests flex_Z" v-if="carInfo.box_status != 1">
						<!-- <text>支付</text> -->
						<view class="interests_box flex_ld">
							<text class=" c0">福合通宝</text>
							<image :src="payType == 1?xz:wxz" @click="clickCheckbox(1)" mode="aspectFill"></image>
						</view>
						<view class="interests_box flex_ld">
							<text class=" c0">FUL</text>
							<image :src="payType == 2?xz:wxz" @click="clickCheckbox(2)" mode="aspectFill"></image>
						</view>
					</view>
					<view class="free_secret  flex_dq" v-if="!secretFree && carInfo.box_status != 1">
						<view class="secret_box flex_c" @click="toggleAgree">
							<image src="../../static/icon/car_pooling_check.png" mode="aspectFill" v-if="!switchMm">
							</image>
							<image src="../../static/icon/car_pooling_check_select.png" mode="aspectFill"
								v-if="switchMm"></image>
						</view>
						<text>今日购买盲盒不再提示输入交易密码</text>
					</view>
				</view>
				<view class="buyNow flex_c" @click="goPay">
					<image class="highlights" src="../../static/image/mask.png" mode=""></image>
					<text>立即购买</text>
				</view>
			</view>
		</u-popup>
		<!-- 交易密码 -->
		<u-popup :show="keyboardShow" mode="center" @close="keyboardShow=false" closeable bgColor="transparent">
			<view class="pass_box flex_ZC">
				<text class="pwd_tit">请输入交易密码</text>
				<u-code-input disabledDot :adjustPosition="false" borderColor="#0071C7" :maxlength="6" focus
					class="code_input" v-model="securityPwd" mode="line" @finish="finishMax" dot></u-code-input>
				<view class="pwd_box flex_ld">
					<text class="pwd_box_btn flex_c" @click="keyboardShow=false,securityPwd=''">取消</text>
					<text class="pwd_box_btn flex_c" @click="$u.throttle(valChange, 500)">确认</text>
				</view>
			</view>
		</u-popup>
		<u-popup :show="blindShow" mode="center" overlayOpacity="0.9" bgColor="transparent">
			<!-- <u-popup :show="blindShow " mode="center"  overlayOpacity="1" bgColor="transparent" :overlayStyle="overlayStyle"> -->
			<view class="openBox" v-if="blindShow">
				<image src="../../static/image/blind2.gif" mode="aspectFill"></image>
			</view>
		</u-popup>

		<u-popup :show="sparePartsShow" mode="center" @close="sparePartsShow=false" bgColor="transparent">
			<view class="parts flex_ZC" v-if="treasureShow">
				<text class="congratulations">恭喜获得</text>
				<view class="parts_box" :class="treasureBox.length<=2?'flex_c':''">
					<view class="parts_box_s " v-for="(item,index) in treasureBox" :key="index">
						<view class="partsimg "
							:class="item.level == 3?'level_bg3':item.level == 2?'level_bg2 ':'level_bg1 '">
							<image class="car_logo" :src="item.car_logo" mode="aspectFill"></image>
							<image class="carimgs" :src="item.cover" mode="aspectFill"></image>
						</view>
						<view class="parts_txt flex_c">
							<text class="level1" v-if="item.level == 1">{{item.name}}</text>
							<text class="level2" v-if="item.level == 2">{{item.name}}</text>
							<text class="level3" v-if="item.level == 3">{{item.name}}</text>
						</view>
						<view v-if="item.integral_number">
							<text class="parts_lsj level3">x {{item.price}}</text>
						</view>
						<view v-else>
							<text class="parts_lsj level1" v-if="item.level == 1">￥{{item.price}}</text>
							<text class="parts_lsj level2" v-if="item.level == 2">￥{{item.price}}</text>
							<text class="parts_lsj level3" v-if="item.level == 3">￥{{item.price}}</text>
						</view>

					</view>
				</view>
				<view class="parts_btn flex_c" @click="isClose">
					<text>确定</text>
				</view>
			</view>
			<view class="parts flex_ZC" v-else>
				<text class="congratulations">糟糕</text>
				<image src="../../static/emjoy/wuyu.png" mode="aspectFill"></image>
				<text class="tishi">本次未获得任何配件。推荐购买夏小慧，无空奖，平均每天可得9个配件!</text>
				<view class="parts_btn flex_c" @click="goPayXxh">
					<text>去购买</text>
				</view>
			</view>
		</u-popup>

		<u-popup :show="completeShow" mode="center" @close="completeShow=false" bgColor="transparent">
			<view class="parts flex_ZC">
				<text class="congratulations">恭喜</text>
				<image src="../../static/emjoy/bang.png" mode="aspectFill"></image>
				<text class="tishi">耶！拼车完成了</text>
				<view class="parts_btn flex_c" @click="completeShow = false">
					<text>好的</text>
				</view>
			</view>
		</u-popup>

		<u-popup :show="ninetyShow" mode="center" @close="ninetyShow=false" bgColor="transparent">
			<view class="parts flex_ZC">
				<text class="congratulations">温馨提示</text>
				<image src="../../static/emjoy/hello.png" mode="aspectFill"></image>
				<text class="tishi">该车免费配件已开完,</text>
				<text>剩余配件需到交易市场自由兑换</text>
				<view class="parts_btn flex_c" @click="ninetyShow = false">
					<text>确定</text>
				</view>
			</view>
		</u-popup>

		<!-- 玩法介绍 -->
		<u-popup :show="introduceShow " mode="center" overlayOpacity="1" bgColor="transparent">
			<u-transition :show="introduceShow" mode="fade-left">
				<view class="introduce_box">
					<view class="mask"></view>
					<view class="play_box flex_ld" v-for="(item,index) in gameDescription" :key="item.id">
						<view class="flex_Z">
							<text class="paly_txt">{{item.title}}</text>
							<rich-text class="explain" :nodes="item.information"></rich-text>
						</view>
						<image :src="item.cover" mode="aspectFill"></image>
					</view>
					<view class="blank" @click="introduceShow = false">
						<text>点击空白处关闭</text>
					</view>
				</view>
			</u-transition>
		</u-popup>

		<u-popup :show="tipShow " mode="center" @close="tipShow=false" bgColor="transparent">
			<view class="tips flex_ZC">
				<text class="tips_top">提示</text>
				<rich-text class="tips_centet" :nodes="nodeCentent"></rich-text>
			</view>
		</u-popup>
<!-- 		<u-popup :show="tipshow2 " mode="center" bgColor="transparent">
			<view class="tips flex_ZC">
				<text class="tips_top">提示</text>
				<text class="tips_txt">抽签结束，查看开奖信息</text>
				<view class="parts_btn_s flex_c" @click="checkOut">
					<text>去查看</text>
				</view>
			</view>
		</u-popup> -->

	</view>

</template>

<script>
	import {
		carIndexInfo,
		drawBlindBox,
		vipDescription,
		gameDescription,
		rankingList,
		carpoolingConfig,
		judgeCar,
		currentMonthList
	} from "../../api/mycar.js";
	export default {
		data() {
			return {
				ids: 1, //navbar id
				navId: 2, //排行榜切换id
				installmentId: '',
				securityPwd: '', //安全密码
				myLevel: '', //当前等级
				nodeCentent: '',//富文本
				carJudge: '', //拼车状态
				noticeInfo: '',//进度条
				payType:1,//支付方式
				winningStatus: null,
				countDown: 0, //倒计时
				secretFree: 0, //是否免密
				switchMm: 0, //切换免密
				tipShow: false, //提示弹窗
				showPay:false, //购买弹窗
				wancheng:false, //暂存状态
				blindShow: false, //开启动画弹窗
				keyboardShow: false, //密码框弹窗
				introduceShow: false, //玩法介绍弹窗
				sparePartsShow: false, //开启成功弹窗 
				treasureShow: false, //是否开出宝箱零件
				completeShow: false, //拼车进度100%弹窗
				ninetyShow: false, // 拼车93%弹窗
				voiceShow: false, //开启声音
				tipshow2: false, //抽签结束提示
				animationShow: true, //开启动画
				treasureBox: [], //恭喜获得
				rankingList: [], //排行榜
				vipList: [], //vip等级
				selfInfo: {}, //自己
				carConfig: {}, //拼车配置
				carInfo: {}, //首页数据
				carInfoPool: {}, //首页车辆数据
				gameDescription: {}, //玩法介绍
				overlayStyle: {
					background: 'rgba(207, 216, 220)'
				},
				xz: '../../static/icon/syes.png',
				wxz: '../../static/icon/sno.png',
				titleStyle: {
					color: '#ffffff'
				},
				navList: [{
					id: 1,
					name: '我的车机',
				}, {
					id: 2,
					name: 'VIP',
				}, {
					id: 3,
					name: '排行榜',
				}],
				tabList: [{
					id: 2,
					name: ' 当月完拼排行榜'
				}, {
					id: 1,
					name: ' 当前完成度排行榜'
				}],
				is_allocation:false,
				monthlist:[],
				page: 1,
				size: 20,
				selnum: "",
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
			}
		},

		onLoad() {
			this.initDetail()
			this.initCarConfig()
			this.isCountDown()
			console.log(uni.getStorageSync('voiceShow'));
			this.voiceShow = uni.getStorageSync('voiceShow')
			this.animationShow = uni.getStorageSync('animationShow')
			let jinduNumber = uni.getStorageSync('carBuyTips')
			if (jinduNumber) {
				// 大于93 每次进入页面都提示
				this.ninetyShow = true
				uni.removeStorageSync("carBuyTips")
			}
		},
		onShow() {
			this.initInfo()
			this.vipInfo()
			this.initRecord()
		},
		methods: {
			gomycar(){
				uni.navigateTo({
					url: '/pagesMy/nationalCarPooling/winningResults' 
				})
					// uni.navigateTo({
					// 	url: '/pagesMy/nationalCarPooling/winningResults?activeShow=' + false +
					// 		'&installmentId=' + this.installmentId
					// })
				
			},
			// 玩法介绍
			initDetail() {
				gameDescription().then(res => {
					console.log(res);
					if (res.code == 1) {
						this.gameDescription = res.data
					}
				})
			},
			// 配置
			initCarConfig() {
				carpoolingConfig().then(res => {
					console.log(res);
					if (res.code == 1) {
						this.carConfig = res.data
						this.nodeCentent = res.data.blind_box_value.replace(/\r\n/g, "<p/>") || '';
					}
				})
			},
			// 首页数据
			initInfo() {
				carIndexInfo().then(res => {
					console.log(res);
					if (res.code == 1) {
						this.carInfo = res.data
						this.carInfoPool = res.data.member_carpool
						this.noticeInfo = res.data.notice
						this.secretFree = res.data.member_carpool.is_secret_free
						this.payType = res.data.member_carpool.pay_type
						this.navList[0].name = res.data.member_carpool.car_name
						this.installmentId = res.data.member_carpool.installment_id
						this.winningStatus = res.data.is_winning
						this.is_allocation=res.data.is_allocation
						console.log(this.winningStatus,"sadasdsdsdsssss")
						if (this.winningStatus == true) {
							this.tipshow2 = true
						}
						uni.setStorageSync('carBuyTips', res.data.member_carpool.buy_tips)

					}
				})
			},
			// vip等级
			vipInfo() {
				vipDescription().then(res => {
					console.log('vip-----', res);
					if (res.code == 1) {
						this.myLevel = res.data.vip_level
						this.vipList = res.data.list
					}
				})
			},
			// 初始化排行榜
			initRank() {
				let data = {
					installment_id: this.installmentId,
					type: 1
				}
				rankingList(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.rankingList = res.data.list
						this.rankingList.forEach((item, index) => {
							if (item.is_self) {
								this.selfInfo = item
							} else {
								this.selfInfo = res.data.self
							}
						})
					}
				})
			},
		getlist() {
			currentMonthList({
				page: this.page,
			}).then(res => {
				if (res.code == 1) {
					let list = res.data.data;
					this.monthlist = this.page == 1 ? list : this.monthlist.concat(list);
					// console.log(this.goodlist2);
					if (list.length < this.size) this.status = 'nomore';
					else this.status = 'loading';	
				}
		
			})
		},
			// 拼车状态
			initRecord() {
				judgeCar().then(res => {
					console.log(res);
					if (res.code == 1) {
						this.carJudge = res.data.member_carpool
						// if (this.carJudge == 3 || this.carJudge == 6) {
						// 	uni.navigateTo({
						// 		url: '/pagesMy/nationalCarPooling/winningResults?activeShow=' + false +
						// 			'&installmentId=' + this.installmentId
						// 	})
						// }
					}
				})
			},
			// 倒计时
			isCountDown() {
				let timestamp = new Date().getTime();
				let now = new Date();
				now.setHours(23, 59, 59, 999);
				let endOfTodayTimestamp = now.getTime();
				// console.log('最后一秒', endOfTodayTimestamp);
				this.countDown = endOfTodayTimestamp - timestamp
				// console.log(this.countDown);
			},
			// 计算总价
			totalPrice(allPrice, leiji) {
				console.log(allPrice * 100, leiji * 100);
				return ((allPrice * 100) / (leiji * 100)).toFixed(3)
			},
			//切换
			changeNav(id) {
				this.ids = id
				if (id == 3) {
					this.page=1
					this.monthlist=[]
					this.getlist()
				}
			},
			changePhb(id) {
				this.selfInfo = {}
				this.navId = id
				if(id==2){
					this.page=1
					this.monthlist=[]
					this.getlist()
				}else if(id==1){
					this.rankingList = []
					this.initRank()
				}
				
			},
			// 玩法介绍
			isIntroduce() {
				this.introduceShow = true
			},
			// 开启声音
			changeVoice() {
				this.voiceShow = !this.voiceShow
				if (this.voiceShow) {
					this.animationShow = true
					uni.$u.toast('开启音效');
					uni.setStorageSync('animationShow', this.animationShow)
				} else {
					uni.$u.toast('关闭音效');
				}
				uni.setStorageSync('voiceShow', this.voiceShow)
			},
			// 开启动画
			changeAnimation() {
				console.log(2222222222);
				this.animationShow = !this.animationShow
				if (this.animationShow) {
					uni.$u.toast('开启盲盒动画效果');
				} else {
					this.voiceShow = false
					uni.setStorageSync('voiceShow', this.voiceShow)
					uni.$u.toast('关闭盲盒动画效果');
				}
				uni.setStorageSync('animationShow', this.animationShow)
			},
			// 切换支付方式
			clickCheckbox(e) {
				console.log(e);
				if(e == 1){
					this.payType = 1
				}else{
					this.payType = 2
				}
			},
			// 是否免密
			toggleAgree() {
				this.switchMm = !this.switchMm
				console.log(this.switchMm);
			},
			// 是否免密支付通道
			goPay() {
				if (this.secretFree) {
					this.showPay = false
					this.confirmPay()
				} else {
					if (this.carInfo.box_status == 1) {
						this.showPay = false
						this.confirmPay()
					} else {
						this.showPay = false
						this.keyboardShow = true
					}
				}
			},
			// 快捷支付
			finishMax(e) {
				console.log(e);
				uni.$u.throttle(this.valChange(), 500)
			},
			// 输入密码
			valChange() {
				if (this.securityPwd.length >= 6) {
					this.confirmPay()
				} else {
					console.log('请输入正确密码');
				}
			},
			confirmPay() {
				let data = {
					member_carpool_id: this.carInfoPool.id,
					password: this.securityPwd,
					pay_type: this.payType,
					is_secret_free: this.switchMm ? 1 : this.secretFree,
				}
				drawBlindBox(data).then(res => {
					console.log(res);
					this.securityPwd = ''
					this.keyboardShow = false
					if (res.code == 1) {
						this.wancheng = res.data.is_completed
						
						if (this.voiceShow) {
							const innerAudioContext = uni.createInnerAudioContext();
							innerAudioContext.autoplay = true;
							innerAudioContext.src = '/static/voice/boxSound.mp3';
							innerAudioContext.onPlay(() => {
								// console.log('开始播放'); 
							});
						}
						if (res.data.accessories.length > 0) {
							this.treasureShow = true
							this.treasureBox = res.data.accessories
						} else {
							this.treasureShow = false
						}
						
						let that = this;
						if(that.animationShow){
							this.blindShow = true
							setTimeout(function() {
								if (that.voiceShow) {
									if (res.data.accessories[0].integral_number) {
										// console.log('爆金币了------------');
										const innerAudioContext = uni.createInnerAudioContext();
										innerAudioContext.autoplay = true;
										innerAudioContext.src = '/static/voice/coin.mp3';
										innerAudioContext.onPlay(() => {
											// console.log('开始播放'); 
										});
									}
								}
								that.blindShow = false
								that.sparePartsShow = true
								that.initInfo()
							}, 2400);
						}else{
							that.blindShow = false
							that.sparePartsShow = true
							that.initInfo()
						}
					} else {
						uni.$u.toast(res.msg);
					}
				})
			},
			// 关闭抽奖弹窗
			isClose() {
				this.sparePartsShow = false
				if (this.wancheng) {
					this.completeShow = true
				}
			},
			allJump(e) {
				let {
					url
				} = e.currentTarget.dataset
				uni.navigateTo({
					url: url
				})
			},
			// 查看车辆详情
			goPeihao() {
				uni.navigateTo({
					url: '/pagesMy/nationalCarPooling/numberAllocation'
				})
			},
			// 开盒记录
			goBoxRecord() {
				uni.navigateTo({
					url: '/pagesMy/nationalCarPooling/carBlindBoxRecord?id=' + this.installmentId
				})
			},
			// 去查看
			checkOut() {
				// uni.navigateTo({
				// 	url: '/pagesMy/nationalCarPooling/winningResults?activeShow=' + true + '&installmentId=' + this
				// 		.installmentId
				// })
				uni.navigateTo({
					url: '/pagesMy/nationalCarPooling/winningResults' 
				})
			},
			// 去购买
			goPayXxh() {
				this.sparePartsShow = false
				uni.navigateTo({
					url: '/pagesMy/mallCenter/productDetails?id=' + this.carConfig.xxf_goods_id
				})
			},
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('下拉刷新');
			let that = this;
			setTimeout(function() {
				that.initInfo()
				that.initRecord()
			}, 800);
		},
		onReachBottom() {
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.getlist()
			}
		},
	}
</script>

<style scoped lang="scss">
	@font-face {
		font-family: 'iconfont2';
		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
	}

	.pagess {
		width: 100%;
		min-height: 100vh;
		background: #10191F;
		color: #ffffff;
	}

	.navigation {
		width: 690rpx;
		height: 64rpx;
		background: #162430;
		margin: 30rpx auto;
	}

	.navigation_box {
		width: 230rpx;
		height: 64rpx;
		font-size: 32rpx;
		color: #ffffff60;
	}

	.active {
		position: relative;
		color: #ffffff;
		background: url('../../static/image/car_nav.png');
		background-size: 100% 100%;
	}

	.active::before {
		content: '';
		position: absolute;
		top: -50rpx;
		left: 0;
		width: 100%;
		height: 100rpx;
		background: url('../../static/image/car_xz.png');
		background-size: 100% 100%;
	}


	.mask {
		width: 100%;
		height: 180rpx;
	}

	.noticeBar {
		width: 720rpx;
		height: 70rpx;
		margin: 0 auto;
	}

	.introduce_box {
		width: 100vw;
		height: 100vh;
	}

	.play_box {
		width: 690rpx;
		height: 214rpx;
		margin: 26rpx auto 0;
		padding: 0 40rpx;
		box-shadow: inset 0rpx 0rpx 30rpx 0rpx #1C85DB;
	}

	.play_box>image {
		width: 138rpx;
		height: 138rpx;
	}

	.paly_txt {
		font-size: 44rpx;
		color: #ffffff;
		margin-bottom: 10rpx;
		font-family: iconfont2;
	}

	.blank {
		display: flex;
		justify-content: center;
		width: 100%;
		height: 500rpx;
		height: calc(100vh - 650px);
		/* background: pink; */
	}

	.blank>text {
		margin-top: 80rpx;
		font-size: 30rpx;
		color: rgba(225, 225, 225, 0.6);
	}

	.explain {
		font-size: 28rpx;
		color: #ffffff !important;
	}

	.exhibition {
		position: relative;
		width: 750rpx;
		height: 546rpx;
		margin-top: 16rpx;
	}

	.jindu {
		width: 100%;
		position: absolute;
		bottom: -30rpx;
		left: 50%;
		transform: translatex(-50%);
		font-size: 48rpx;
		text-align: center;
		color: #ffffff;
		font-family: 'iconfont2';
		letter-spacing: 8rpx;
	}

	.allocation {
		width: 40rpx;
		height: 240rpx;
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 150rpx;
		right: 10rpx;
		z-index: 3;
	}

	.allocation>image {
		width: 60rpx;
		height: 224rpx;
	}

	.xuancai {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 750rpx;
		height: 450rpx;
		/* animation: redBall 6s linear infinite; */
	}

	.bg1 {
		position: absolute;
		top: -50rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 150%;
		height: 596rpx;
		z-index: 2;
	}

	.bg2 {
		position: absolute;
		top: 120rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 600rpx;
		height: 390rpx;
		z-index: 3;
	}

	.car_box_tit {
		position: relative;
		font-size: 26rpx;
		margin-left: 32rpx;
	}

	.carlogo {
		position: absolute;
		top: 20rpx;
		right: 50rpx;
		width: 60rpx;
		height: 80rpx;

	}

	.car_box_tit_l>image {
		width: 22rpx;
		height: 22rpx;
		margin-right: 10rpx;
	}

	.car_img {
		width: 576rpx;
		height: 506rpx;
	}

	.car_img>image {
		width: 100%;
		height: 100%;
	}

	.car_number {
		position: relative;
		width: 212rpx;
		margin-top: 24rpx;
	}

	.car_number>text {
		position: absolute;
		top: -24rpx;
		left: 20rpx;
		font-size: 48rpx;
		z-index: 2;
		font-family: 'iconfont2';
	}

	.car_bg2 {
		position: absolute;
		top: 0;
		left: 0;
		max-width: 320rpx;
		height: 48rpx;
		z-index: 1;
	}

	.cumulative {
		width: 690rpx;
		height: 156rpx;
		background: url('../../static/image/car_fund.png');
		background-size: 100% 100%;
		margin: 50rpx auto 30rpx;
	}

	.cumulative_l {
		width: 100rpx;
		height: 100rpx;
		/* background: pink; */
		margin-left: 30rpx;
	}

	.cumulative_r {
		display: flex;
		flex: 1;
		padding: 0 30rpx;
	}

	.cumu_lj {
		font-size: 28rpx;
		color: #dbdbdb;
	}

	.cumulative_money {
		font-size: 40rpx;
		color: #ffffff;
		font-family: 'iconfont2';
	}

	.progress {
		padding: 8rpx 10rpx;
		background: #153f4a;
		border-radius: 40rpx;
		margin-top: 20rpx;
	}

	.card {
		width: 690rpx;
		margin: 30rpx auto;
	}

	.card_l {
		position: relative;
		width: 330rpx;
		height: 124rpx;
		background: url('../../static/image/car_wdzh.png');
		background-size: 100% 100%;
	}

	.card_r {
		position: relative;
		width: 330rpx;
		height: 124rpx;
		background: url('../../static/image/car_wdpc.png');
		background-size: 100% 100%;
	}

	.card_box {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		width: 170rpx;
		/* background: pink; */
	}

	.voice {
		position: absolute;
		top: 34rpx;
		left: 30rpx;
		z-index: 9;
	}

	.voice>image {
		width: 34rpx;
		height: 34rpx;
	}
	.donghua {
		position: absolute;
		top: 34rpx;
		left: 90rpx;
		z-index: 9;
	}

	.donghua>image {
		width: 36rpx;
		height: 36rpx;
	}
	.blind_box {
		position: relative;
		width: 690rpx;
		height: 640rpx;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
		margin: 0 auto;
	}

	.blind_txt1 {
		position: relative;
		font-size: 32rpx;
		color: #ffffff;
		margin: 28rpx 0 10rpx 0;
	}

	.blind_txt1>image {
		width: 26rpx;
		height: 26rpx;
		margin-left: 10rpx;
		z-index: 10;
	}

	.blind_txt2 {
		font-size: 26rpx;
		color: #ededed;
		margin-right: 10rpx;
	}

	.blind_txt3 {
		position: absolute;
		top: 32rpx;
		right: 30rpx;
		font-size: 28rpx;
		color: #ffffff80;
		z-index: 9;
	}

	.blind_img {
		position: absolute;
		top: 0rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 520rpx;
		height: 520rpx;
	}

	.blind_img>image {
		width: 100%;
		height: 100%;
		/* background: pink; */
	}

	.surplus {
		position: absolute;
		bottom: 124rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 600rpx;
		height: 82rpx;
		font-size: 28rpx;
		color: #ffffff80;
	}

	.blind_btn {
		position: absolute;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 600rpx;
		height: 82rpx;
		font-size: 36rpx;
		color: #ffffff;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
	}

	.limit {
		position: absolute;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 600rpx;
		height: 82rpx;
		font-size: 32rpx;
		color: #ffffff;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
		opacity: 0.5;
	}

	.open>image {
		width: 28rpx;
		height: 28rpx;
		margin: 0 10rpx 0 22rpx;
	}

	.open>text {
		font-family: 'iconfont2';
		animation: breathe 2s ease-in-out infinite;
	}

	.grade {
		position: relative;
		width: 690rpx;
		min-height: 420rpx;
		opacity: 0.8;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
		margin: 0 auto 40rpx;
	}

	.grade_top {
		position: relative;
		width: 620rpx;
		margin: 0 auto;
		padding: 30rpx 0;
		display: flex;
		justify-content: space-between;
		/* border-bottom: 1rpx solid #1C85DB; */
	}

	.grade_box {
		/* margin-right: 50rpx; */
	}

	.grade_box>image {
		width: 46rpx;
		height: 42rpx;
		margin-right: 14rpx;
	}

	.texiao {
		opacity: 1;
		border: 4rpx solid #26A4F2;
		/* animation: redBall 6s linear infinite; */
	}

	.colorful1 {
		font-size: 44rpx;
		font-family: 'iconfont2';
		background: linear-gradient(180deg, #FFCEA9, #CFEBFC);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.colorful2 {
		font-size: 44rpx;
		font-family: 'iconfont2';
		background: linear-gradient(180deg, #59B9F4, #CFEBFC);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.colorful3 {
		font-size: 44rpx;
		font-family: 'iconfont2';
		background: linear-gradient(180deg, #F8FFA9, #CFEBFC);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.bor_btm {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 4rpx;
	}

	.grade_c_tip {
		width: 620rpx;
		margin: 0 auto;
		padding: 30rpx 0;
		font-size: 28rpx;
		color: #ffffff80;
	}

	.activation {
		position: absolute;
		bottom: 38rpx;
		left: 32rpx;
		width: 620rpx;
		margin: 0 auto;
		font-size: 32rpx;
		color: #ffffff;
	}

	.grade_bg1 {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 690rpx;
		height: 420rpx;
		margin: 0 auto;
		font-size: 32rpx;
		color: #ffffff;
	}

	.tips {
		width: 690rpx;
		border-radius: 20rpx;
		background: #111B23;
		padding: 20rpx 0;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
	}

	.tips_top {
		margin-top: 20rpx;
	}

	.tips_centet {
		padding: 20rpx 30rpx;
		font-size: 28rpx;
		color: #dbdbdb;
	}

	.ranking_box {
		width: 690rpx;
		padding-bottom: 40rpx;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0 auto;
	}

	.ranking_top {
		width: 620rpx;
		margin: 0 auto;
		font-size: 32rpx;
		color: ffffff60;
		padding-top: 30rpx;
	}

	.navbars {
		position: relative;
		width: 620rpx;
		margin: 0 auto;
	}

	.navbars_box {
		padding: 24rpx 0;
		font-size: 32rpx;
	}

	.navbars_box>text {
		color: #ffffff60;
		margin-right: 60rpx;
	}

	.active2 {
		color: #ffffff !important;
	}

	.second {
		position: relative;
		width: 620rpx;
		margin: 20rpx auto;
	}

	.second_txt1 {
		position: relative;
		width: 120rpx;
	}

	.lllll {
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.rrrrr {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.second_txt2 {
		width: 360rpx;
		// background: pink;
	}

	.second_txt3 {
		width: 220rpx;
	}

	.second_txt4 {
		width: 300rpx;
		background: pink;
	}

	.second_txt5 {
		width: 200rpx;
		background: skyblue;
	}

	.second_txt6 {
		width: 120rpx;
		background: pink;
	}

	.ranking_list {
		position: relative;
		width: 620rpx;
		margin: 32rpx auto;
	}

	.geren {
		width: 120rpx;
		font-size: 38rpx;
		margin-left: 12rpx;
	}
	.geren2{
		width: 120rpx;
		font-size: 28rpx;
	}

	.top1 {
		position: absolute;
		top: -18rpx;
		left: -30rpx;
		width: 75rpx;
		height: 75rpx;
		margin-left: 20rpx;
	}

	.second_txt2>image {
		width: 86rpx;
		height: 86rpx;
		border-radius: 50%;
	}

	.baifen {
		text-align: right;
		width: 150rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		font-family: iconfont2;
	}

	.centertop {
		width: 240rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 10rpx;
	}

	.name {
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		white-space: nowrap;
		/* 防止文本换行 */
		overflow: hidden;
		/* 隐藏溢出部分 */
		text-overflow: ellipsis;
		/* 显示省略号 */
	}

	.time {
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.myphb {
		position: fixed;
		bottom: 0rpx;
		left: 0;
		width: 750rpx;
		background: #10191F;
		z-index: 9;
	}

	.myphb_box {
		width: 690rpx;
		margin: 20rpx auto;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
	}

	.qqqq {
		padding: 10rpx 0;
	}

	.parts {
		width: 660rpx;
		min-height: 540rpx;
		background: url('../../static/image/tcImg.png');
		background-size: 100% 100%;
		padding: 20rpx 0;
	}

	.parts>image {
		width: 252rpx;
		height: 252rpx;
		margin-top: 20rpx;
	}

	.congratulations {
		font-family: 'iconfont2';
		font-size: 46rpx;
		background: linear-gradient(90deg, #26A4F2, #ffffff);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.parts_box {
		display: flex;
		width: 646rpx;
		overflow-x: auto;
		margin-top: 30rpx;
	}

	.parts_box_s {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 280rpx;
	}

	.partsimg {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		width: 180rpx;
		height: 180rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
		/* animation: breathe 2s ease-in-out infinite; */
	}

	.level_bg1 {
		background: linear-gradient(180deg, #743F0D 26%, #2D0D07 100%);
		border: 1rpx solid #d29a53;
	}

	.level_bg2 {
		background: linear-gradient(180deg, #5A7098 26%, #FEFFFF 100%);
		border: 1rpx solid #ffffff;
	}

	.level_bg3 {
		background: linear-gradient(180deg, #5C430B 26%, #A16C11 66%, #D9DA42 100%);
		border: 1rpx solid #febf68;
	}

	.news {
		animation: redBall 6s linear infinite;
	}

	.carimgs {
		width: 160rpx;
		height: 160rpx;
		border-radius: 20rpx;
	}

	.car_logo {
		position: absolute;
		top: 4rpx;
		left: 12rpx;
		width: 30rpx;
		height: 32rpx;
		/* border-radius:  20rpx 0 20rpx 0; */
		z-index: 2;
	}

	.parts_txt {
		width: 280rpx;
		font-size: 28rpx;
		margin: 14rpx 0;
	}

	.level1 {
		color: #FDBE67;
	}

	.level2 {
		color: #9FC1FF;
	}

	.level3 {
		color: #FBF73B;
	}

	.parts_lsj {
		font-size: 40rpx;
		font-family: 'iconfont2';
	}

	.parts_btn {
		width: 594rpx;
		height: 80rpx;
		font-size: 36rpx;
		color: #ffffff;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
		border-radius: 12rpx;
		margin-top: 30rpx;
		margin-bottom: 24rpx;
	}

	.tips_txt {
		margin-top: 50rpx;
	}

	.parts_btn_s {
		width: 180rpx;
		height: 60rpx;
		font-size: 32rpx;
		color: #ffffff;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
		border-radius: 12rpx;
		margin: 70rpx 0 30rpx;
	}



	.tishi {
		width: 580rpx;
		margin: 0 auto;
		font-size: 32rpx;
		text-align: center;
		color: #ffffff;
	}

	.pay {
		width: 750rpx;
		background: #111B23;
		border-radius: 20rpx 20rpx 0 0;
		color: #ffffff;
		overflow: auto;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
	}

	.pay>text {
		font-size: 36rpx;
		margin: 60rpx 0;
	}

	.pay_box {
		width: 694rpx;
		border-radius: 18rpx;
	}

	.pay_box_c {
		font-size: 24rpx;
		padding: 28rpx 28rpx 0;
	}

	.pay_box_c>text:nth-child(2) {
		width: 70%;
		text-align: right;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.pay_money {
		width: 690rpx;
		padding: 30rpx 24rpx;
		margin: 30rpx auto 0;
		border-top: 1rpx solid #ffffff20;
	}

	.pay_img {
		width: 32rpx;
		height: 32rpx;
	}

	.pay_btn {
		min-width: 176rpx;
		padding: 4rpx 0;
		background: #A423EA;
		color: #ffffff;
		border-radius: 40rpx;
	}

	.pay_btn_l>image {
		width: 28rpx;
		height: 28rpx;
		margin: 0 6rpx;
	}

	.pay_btn_r>image {
		width: 28rpx;
		height: 28rpx;
		margin: 0 6rpx;
	}

	.bgss {
		width: 230rpx !important;
		background: linear-gradient(274deg, #AB8E68, #D7BA93);
	}

	.go_pay {
		font-size: 36rpx;
		font-family: 'iconfont2';
		margin-left: 10rpx;
	}

	.free_secret {
		width: 650rpx;
		margin: 20rpx auto;
		font-size: 28rpx;
	}

	.secret_box>image {
		width: 38rpx;
		height: 34rpx;
		margin-right: 20rpx;
	}
	.interests {
		width: 690rpx;
		// background: #F2F2F2;
		border-radius: 12rpx;
		margin: 24rpx 0;
	}
	
	.interests>text {
		font-size: 32rpx;
		color: #ffffff;
		font-weight: 700;
		padding: 24rpx 24rpx 36rpx 24rpx;
	}
	
	.interests_box {
		padding: 0 24rpx;
		margin-bottom: 36rpx;
		font-size: 28rpx;
	}
	
	.interests_box>image {
		width: 36rpx;
		height: 36rpx;
	}
	

	.buyNow {
		position: relative;
		width: 690rpx;
		margin: 50rpx auto;
	}

	.buyNow>text {
		text-align: center;
		width: 100%;
		color: #ffffff;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
	}

	.pass_box {
		width: 602rpx;
		height: 406rpx;
		background: #111B23;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
		border-radius: 20rpx;
		z-index: 8;
	}

	.pwd_tit {
		width: 602rpx;
		text-align: center;
		font-size: 36rpx;
		color: #ffffff;
		padding-top: 50rpx;
		margin-bottom: 70rpx;
	}

	.code_input {
		margin: 0 auto;
	}

	.pwd_box {
		width: 522rpx;
		height: 72rpx;
		margin: 0 auto;
		margin-top: 50rpx;
	}

	.pwd_box_btn {
		width: 220rpx;
		height: 72rpx;
		border-radius: 12rpx;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
		font-size: 28rpx;
		color: #ffffff;
	}

	.openBox {
		display: flex;
		align-items: flex-end;
		width: 100%;
		height: 1400rpx;
	}

	.openBox>image {
		animation: blindState 3s ease 1;
	}

	@keyframes blindState {
		0% {
			transform: translateY(0) scale(0.8);
		}

		50% {
			transform: translateY(-300px) scale(1)
		}

		100% {
			transform: translateY(-300px) scale(1.1)
		}
	}

	@keyframes redBall {
		0% {
			box-shadow: 0 0 20px #fff, 20px 0 80px rgb(0, 255, 213), -20px 0 80px rgb(72, 255, 0), inset 0 0 50px #fff, inset -200px 0 80px rgb(0, 64, 255);
		}

		50% {
			box-shadow: 0 0 20px #fff, 20px 0 80px rgb(0, 242, 255), -20px 0 80px rgb(17, 255, 0), inset 0 0 50px #fff, inset 0px 0 80px rgb(255, 0, 55);
		}

		100% {
			box-shadow: 0 0 20px #fff, 20px 0 80px rgb(179, 255, 0), -20px 0 80px #0ff, inset 0 0 50px #fff, inset 200px 0 80px rgb(255, 0, 21), inset 10px 0 80px #0ff;
		}
	}

	@keyframes breathe {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.05);
		}

		100% {
			transform: scale(1);
		}
	}

	/deep/ .u-navbar__content__right__text {
		color: #ffffff;
	}

	/deep/.u-line-progress__line {
		background: linear-gradient(90deg, #7bb9ec 0%, #2693EC 100%);
	}

	/deep/.u-code-input__item__dot {
		background: #1C85DB;
	}

	/deep/.u-count-down__text {
		color: #ffffff !important;
	}
</style>